<mat-card cdkDrag cdkDragBoundary=".process-editor-modeling-area">
    <div class="ama-palette-header" cdkDragHandle>
        <mat-icon (click)="toggleOpen()">more_horiz</mat-icon>
    </div>
    <div class="ama-palette-body" [class.ama-opened]="opened">
        <ng-container *ngFor="let item of paletteElements">
            <ng-container
                 *ngIf="!isSeparator($any(item)) && isAllowed($any(item)); else separator">
                <ng-container *ngTemplateOutlet="hasChildren($any(item)) ? containerElement : clickableElement; context: { $implicit: item }">
                </ng-container>
            </ng-container>
        </ng-container>
    </div>
</mat-card>

<ng-template #containerElement let-item>
    <div class="entry-parent">
        <div class="entry {{item.icon}}">
            <button
                [title]="item.title | translate"
                [attr.data-automation-id]="item.group + '::' + item.type"
                ama-palette-overlay
                [templatePortalContent]="drawer"
                [amaPaletteItem]="item"
                [attr.nested]="item.nested ? item.nested : false">
            </button>
        </div>
    </div>
</ng-template>

<ng-template #clickableElement let-item>
    <div class="entry-parent">
        <div *ngIf="paletteIconSvg[item?.svg]" class="entry ama-svg" draggable="true"
            [attr.data-automation-id]="item.group + '::' + item.type"
            [innerHTML]="paletteIconSvg[item?.svg]"
            [title]="item.title | translate"
            (dragstart)="onDrag(item, $event)"
            (click)="onClick(item, $event)">
        </div>
        <div *ngIf="!paletteElementIcons[item?.svg] && !hasChildren(item)" draggable="true" class="entry {{item.icon}}"
            [title]="item.title | translate"
            [class.ama-selected]="item === selectedTool"
            [attr.data-automation-id]="item.group + '::' + item.type"
            (click)="onClick(item, $event)"
            (dragstart)="onDrag(item, $event)">
        </div>
        <span class="ama-drawer-item-tag" *ngIf="item.tag" [title]="item.title | translate" draggable="true"
        (click)="onClick(item, $event)" (dragstart)="onDrag(item, $event)">{{item.tag | translate}}</span>
    </div>
</ng-template>

<ng-template #separator>
    <hr class="ama-separator">
</ng-template>

<ng-template let-item #drawer>
    <mat-card class="ama-palette-drawer" >
        <div class="ama-palette-body">
            <ng-container *ngFor="let child of item.children">
                <ng-container *ngTemplateOutlet="hasChildren(child) ? containerElement : clickableElement; context: { $implicit: child }">
                </ng-container>
            </ng-container>
        </div>
    </mat-card>
</ng-template>
